<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <div>
            <h1>文本输入</h1>
            <p>你输入的是： {{ message + 666 }}</p>
            <!-- 在 "change" 事件后同步更新而不是 "input" -->
            <!-- <input type="text" v-model.lazy="message"> -->

            <!-- .number 将输入内容转换为数字 -->
            <!-- <input v-model.number="message" /> -->

            <!-- .trim 用来去除首位空格，不能去除中间空格 -->
            <!-- <input v-model.trim="message" /> -->

            <!-- 通过 input 事件获取内容，然后修改 message 状态，页面就会发生改变 -->
            <input type="text" v-model="message">

            <textarea v-model="message" placeholder="请输入内容"></textarea>
        </div>

        <div>
            <h1>复选框</h1>

            是否同意该协议
            <input id="che" type="checkbox" v-model="checked" true-value="同意" false-value="不同意">
            <!-- <label for="che">{{checked ? "同意" : '不同意'}}</label> -->
            <label for="che">{{checked}}</label>
        </div>

        <div>
            <h1>多个复选框</h1>
            <input type="checkbox" value="a" v-model="checkeds">a
            <input type="checkbox" value="b" v-model="checkeds">b
            <input type="checkbox" value="c" v-model="checkeds">c
            <input type="checkbox" value="d" v-model="checkeds">d
            <input type="checkbox" value="e" v-model="checkeds">e

            <p>{{checkeds}}</p>
        </div>

        <div>
            <h1>单选</h1>
            <input type="radio" v-model="picked" value="男"> 男
            <input type="radio" v-model="picked" value="女"> 女
            <p>你选中的是： {{picked}}</p>
        </div>

        <div>
            <h1>选择器</h1>
            <p>你选中的是：{{selected}} </p>
            <!-- 如果没有设置 value 值，选中后，会直接取出标签内的内容 -->
            <!-- <select v-model="selected">
                <option value="" disabled>请选择</option>
                <option>黄焖鸡</option>
                <option>黄焖排骨</option>
                <option>九转大肠</option>
                <option>毛血旺</option>
            </select> -->

            <select v-model="selected">
                <!-- 当设置  value 的时候，value 就是选中后所取的值 -->
                <option value="" disabled>请选择</option>
                <option value="1">黄焖鸡</option>
                <option value="2">黄焖排骨</option>
                <option value="3">九转大肠</option>
                <option value="4">毛血旺</option>
            </select>
        </div>

    </div>
</body>
<script>



    const app = Vue.createApp({
        data () {
            return {
                message: '',
                checked: '不同意',
                checkeds: [],
                picked: '',
                selected: ''
            }
        },
    })
    app.mount('#app')
</script>

</html>